<template>
    <div>
        <Button type="primary" @click="addGroup = true">添加分组</Button>
        <Table border  :columns="columns" :data="data" ></Table>
        <Modal
                v-model="addGroup"
                title="添加分组"
                @on-ok="ok"
                @on-cancel="cancel">

            <Input v-model="addName" prefix="ios-contact" placeholder="Enter name" style="width: auto" />
            <br>
            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                <Checkbox
                        :indeterminate="indeterminate"
                        :value="checkAll"
                        @click.prevent.native="handleCheckAll">全选</Checkbox>
            </div>
            <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
                <div  v-for="item in resource" >
                    <Checkbox :label=item.id> {{item.name}}</Checkbox>
                </div>
            </CheckboxGroup>
        </Modal>
        <Modal
                ID="editGroup"
                v-model="editGroup"
                title="编辑分组"
                @on-ok="okEdit"
                @on-cancel="cancel">
            <input v-model="editId" type="hidden">
            <Input v-model="editName" prefix="ios-contact" placeholder="Enter name" style="width: auto" />
            <br>
            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                <Checkbox
                        :indeterminate="indeterminate2"
                        :value="checkAll2"
                        @click.prevent.native="handleCheckAll2">全选</Checkbox>
            </div>
            <CheckboxGroup v-model="checkAllGroup2" @on-change="checkAllGroupChange2">
                <div  v-for="item in resource" >
                    <Checkbox :label=item.id> {{item.name}}</Checkbox>
                </div>
            </CheckboxGroup>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "GroupComponent",
        data () {
            return {
                columns: [
                    {
                        title:'ID',
                        key:'id'
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'name'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title:'控制器',
                        key:'controls'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(this);
                                            this.editGroup = true;
                                            this.show(params.index);
                                        }
                                    }
                                }, 'Edit'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params);
                                            this.remove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                data:[],
                addGroup: false,
                editGroup: false,
                addName:"",
                addControl:[],
                editName:"",
                editControl:[],
                editId:"",
                resource:[],
                indeterminate: false,
                indeterminate2: false,
                checkAll: false,
                checkAll2: false,
                checkAllGroup: [],
                checkAllGroup2: [],
            }
        },
        mounted(){
            this.getAll();
            this.getResource();
        },
        methods: {
            //获取资源列表
            getResource(){
                axios.get('api/resource',{
                }).then((response)=> {
                    console.log(response);
                    const  len=response.data.data.length;
                    this.resource=response.data.data.slice(0,len);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //获取列表
            getAll(){
                axios.get('api/group',{
                }).then((response)=> {
                    console.log(response);
                    const  len=response.data.data.length;
                    this.data=response.data.data.slice(0,len);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            ok () {
                //添加
                axios.post('api/group',{
                    'name':this.addName,
                    'controls':this.addControl
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    setTimeout(()=>{
                        this.getAll();
                    },1500)
                }).catch(function (error) {
                    console.log(error);
                });
                //
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            show (index) {
                console.log(this.data[index].controls);
                this.editName=this.data[index].name;
                this.editControl=JSON.parse(this.data[index].controls);
                this.editId=this.data[index].id;
                this.checkAllGroup2=JSON.parse(this.data[index].controls);
            },
            remove (index) {
                const url='api/group/'+this.data[index].id;
                axios.delete(url,{
                    data:{'id':this.data[index].id}
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    if(response.data.code===1){
                        //code为1是删除成功
                        this.data.splice(index, 1);
                    }else {}
                }).catch(function (error) {
                    console.log(error);
                });
            },
            okEdit(){
                const url="api/group/"+this.editId;
                axios.put(url,{
                    'id':this.editId,
                    'name':this.editName,
                    'controls':this.editControl
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    setTimeout(()=>{
                        this.getAll();
                    },1500);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handleCheckAll () {
                console.log(this.checkAllGroup);
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;

                }
                this.indeterminate = false;

                if (this.checkAll) {
                    const  all_la=this.resource.map(x => {return x.id});
                    this.checkAllGroup = all_la;
                } else {
                    this.checkAllGroup = [];
                }
            },
            checkAllGroupChange (data) {
                this.addControl=JSON.stringify(data);
                if (data.length === this.resource.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            },
            handleCheckAll2 () {
                console.log(this.checkAllGroup2);
                if (this.indeterminate2) {
                    this.checkAll2 = false;
                } else {
                    this.checkAll2 = !this.checkAll2;

                }
                this.indeterminate2 = false;

                if (this.checkAll2) {
                    const  all_la=this.resource.map(x => {return x.id});
                    this.checkAllGroup2 = all_la;
                } else {
                    this.checkAllGroup2 = [];
                }
            },
            checkAllGroupChange2 (data) {
                this.editControl=JSON.stringify(data);
                if (data.length === this.resource.length) {
                    this.indeterminate2 = false;
                    this.checkAll2 = true;
                } else if (data.length > 0) {
                    this.indeterminate2 = true;
                    this.checkAll2 = false;
                } else {
                    this.indeterminate2 = false;
                    this.checkAll2 = false;
                }
            }
        }
    }
</script>

<style scoped>

</style>